import * as $util from '/lib/hc-util.js'

const template =
    `
<el-dialog :data='setting' :visible.sync="visible" title="流程节点设置">
    <el-form :model='setting' ref="settingform" label-width="80px">
        <el-tabs value='setting'>
            <el-tab-pane label="基本设置" name="setting">
                <el-form-item label="节点类型" prop='itemType'>
                    <el-input disabled :value="setting.itemType=='task'?'任务节点':'分支节点'"></el-input>
                </el-form-item>

                <el-form-item label="调用规则" prop='referId' :rules="[{
                        required: true,
                        message: '请选择调用的规则',
                        trigger: 'change'
                    }
                ]">
                    <el-cascader style='width: 100%;' :props="{label:'rname',value:'rpath',children:'list',expandTrigger:'hover',emitPath:false}"
                        v-model='setting.referId' placeholder="关键字搜索" :options="ruleTree"
                        filterable clearable @change='handleRuleChange'>
                    </el-cascader>
                </el-form-item>
                
                <el-form-item label="展示名称" prop='referName' :rules="[{
                        required: true,
                        message: '请输入行动名称',
                        trigger: 'blur'
                    },
                    {
                        min: 1,
                        max: 30,
                        message: '长度在 1 到 30 个字符',
                        trigger: 'blur'
                    }
                ]">
                    <el-input v-model.trim="setting.referName" placeholder="节点展示名称"></el-input>
                </el-form-item>
                
            </el-tab-pane>
            <el-tab-pane label="结果映射" name="mapping">
                <el-table  :indent="20" :data="resultStruct?[resultStruct]:[]" style="width: 100%;margin-bottom: 20px;"
                    row-key="id" border default-expand-all :tree-props="{children: 'list', hasChildren: 'hasChildren'}" empty-text='请先设置规则，再做变量映射'
                   >
                    <el-table-column label="结果名称" prop="name">
                        <template slot-scope="scope">
                            <span v-if='scope.row.important' style="color: red;">*&nbsp</span><span>{{scope.row.name }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="映射到变量">
                        <template slot-scope="scope">
                            <el-cascader style='width: 100%;' :change-on-select='true' :props="{label:'label',value:'id',children:'list',expandTrigger:'hover',emitPath:false}"
                                v-model='setting.resultMap[scope.row.id]' placeholder="关键字搜索" :options="variTree"
                                filterable clearable>
                            </el-cascader>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
        <el-form-item>
            <el-button @click='handleSettingSubmit' type="primary">确认</el-button>
            <el-button type='danger' v-if='setting.id > 0' @click='handleSettingDelete'>删除</el-button>
            <el-button v-if='setting.id==0' @click='visible=false'>取消</el-button>

        </el-form-item>

    </el-form>
    
</el-dialog>
`;

const vmconfig = {
    template: template,
    data: function() {
        let variTree = $pinfo.ruleList.find(it => it.rtype == 'variable').list;
        $util.$tree.enlabel(variTree);
        return {
            setting: {
                id: 0,
                itemType: '',
                referId: '',
                referName: '',
                resultMap: null
            },
            resultStruct: null,
            visible: false,
            ruleTree: [],
            variTree: variTree,
        }
    },
    watch: {
        "setting.itemType": {
            immediate: true,
            handler: function(nv, ov) {
                let ruleTree = $util.ruleTree();
                if (this.setting.itemType == 'switch') {
                    ruleTree = ruleTree.filter(it => it.rtype.startsWith('rule:clas:'));
                }
                this.ruleTree = ruleTree;
            },
        },
        "setting.referId": {
            immediate: true,
            handler: function(val, old) {
                if (val) {
                    let ruleDef = $pinfo.rulePathMap[val]
                    this.setting.referName = ruleDef.rname;
                    this.resultStruct = $config.componentMap[ruleDef.rtype].resultStruct.root;
                } else {
                    this.setting.referName = '';
                    this.resultStruct = null
                }
            },
        },
    },
    methods: {
        handleSettingSubmit: function() {
            let self = this;
            this.$refs['settingform'].validate((valid) => {
                if (valid) {
                    for (let dataid in this.setting.resultMap) {
                        if (!this.setting.resultMap[dataid]) delete this.setting.resultMap[dataid];
                    };
                    this.visible = !this.actionUpdate(this);
                } else {
                    self.$message({
                        type: 'warning',
                        message: '验证失败，请检查行动设置 和 结果映射.'
                    })
                    return false;
                }
            });
        },

        handleSettingDelete: function() {
            if (this.actionDelete(this)) this.visible = false;
        },

        handleRuleChange: function(val, old) {

        },
        assign: function(lhs, rhs) {
            //the assignment order will infulences the order event
            lhs.id = rhs.id;
            lhs.itemType = rhs.itemType;
            lhs.resultMap = rhs.resultMap || {};
            lhs.referName = rhs.referName;
            lhs.referId = rhs.referId;
        },
        show: function(setting) {
            this.assign(this.setting, setting);
            this.visible = true;
        },
        actionUpdate: function(self) {
            console.log('actionUpdate is not register.', self)
        },
        actionDelete: function(self) {
            console.log('actionDelete is not register.', self)
        },
    },

};

function FlowProperty(userconfig) {
    let vm = new Vue(vmconfig);

    vm = Object.assign(vm, userconfig)

    if (userconfig.el == undefined) { //???
        vm.$mount();
        document.body.appendChild(vm.$el);
    }

    return vm;
}

export default FlowProperty
